<template>
    <div>
        <header>
            <a href="javascript:;" class="left">
                <i class="iconfont icon-up21" @click="jump"></i>
            </a>
            <p>收货地址管理</p>
            <a href="javascript:;" class="right">
                <i class="iconfont icon-kefu1"></i>
            </a>
        </header>
            <div class="main">
                <van-address-list
                    v-model="chosenAddressId"
                    :list="addresslist"
                    default-tag-text="默认"
                    @add="onAdd"
                    @edit="onEdit"
                    @select="onselect"
                />
            </div>
        </div>
</template>

<script>
import Vue from 'vue';
import { AddressList } from 'vant';

Vue.use(AddressList);

export default {
  data() {
    return {
      chosenAddressId: '1',
    };
  },
  computed: {
    addresslist(){
       return this.$store.state.address.adsList
    }
  },
//   created () {
//         let n = this.$route.query.n
//         console.log(this.$route.query.n);
//   },
  methods: {
    jump() {
        // this.$router.go(-1)
        console.log(this.$route.query.n);
        // if(this.$route.query.n==1){
        //     this.$router.push('/myspec')
        //     console.log(111);
        // }
        if(this.$route.query.n==2){
            this.$router.push('/checkout')
        }else{
            this.$router.push('/myspec')
        }
    },
    onAdd(index) {
        this.$router.push({path:'/addressedit',query:{index:-1}})
    },
    onEdit(item, index) {
        this.$router.push({path:'/addressedit',query:{index,item}})
    },
    onselect(index,item){
        console.log(index,item);
        this.$store.commit('address/addressInfo',{index,item})
    }
  },
};
    
</script>

<style src="../assets/font/iconfont.css" scoped></style>
<style lang="less" scoped>
    header{
        width: 375px;
        height:50px;
        background-color: #00bf9d;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
    }
    header .left{
        width: 30px;
        height: 33px;
        line-height: 33px;
        padding-left: 10px; 
    }
    header .left .iconfont{
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        margin: 0 0 0 10px !important;
    }
    header p{
        width: 260px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        font-size: 22px;
        color: #fff;
        margin: 0 10px;
    }
    header .right{
        width: 40px;
        height: 40px;
        font-size: 26px;
        text-align: left;
        line-height: 40px;
        margin-right: 10px;
        /* float: left; */
    }
    header .right .iconfont{
        font-size: 35px;
        color: #fff;
        margin: 0 10px 0 0 !important;
    }
    .main{
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 50px;
        overflow-x: hidden;
        overflow-y: scroll;
        margin: auto;
        background: #f5f5f5;
    }
</style>